<script lang="ts" setup>
import { defineProps, computed, ref, onMounted, watch, onUnmounted } from 'vue';
import { marked } from 'marked';
import { articleApi } from '@/apis/ArticleApi';
import { ElMessage } from 'element-plus';

const props = defineProps<{
	articleId: number;
	currentListParams;
}>();
const articleDetail = ref();
let currentArticleId = ref(props.articleId);

const getArticleDetail = async () => {
	try {
		if (!currentArticleId.value) {
			return;
		}
		const res = await articleApi
			.getArticleDetail(currentArticleId.value)
			.then(async (item) => {
				articleApi.updateViewCount(currentArticleId.value);
				return item;
			});
		articleDetail.value = res.data;
	} catch (error) {
		ElMessage.error('获取文章详情失败');
	}
};
watch(
	() => props.articleId,
	(newId) => {
		currentArticleId.value = newId; // 更新当前文章 ID
		getArticleDetail(); // 调用获取文章详情的函数
	}
);

// 计算属性，解析 Markdown 内容
const parsedContent = computed(() => {
	return marked(articleDetail.value.content);
});

onMounted(() => {
	getArticleDetail();
});
</script>

<template>
	<div class="article-detail-container">
		<!-- 现有内容 -->
		<h1 class="title" v-if="articleDetail">{{ articleDetail.title }}</h1>
		<div class="head" v-if="articleDetail">
			<div class="category">分类: {{ articleDetail.categoryName }}</div>
			<div class="tags">标签: {{ articleDetail.tagName }}</div>
			<div class="view-count">
				浏览次数: {{ articleDetail.viewCount }}
			</div>
		</div>
		<img
			:src="articleDetail.thumbnail"
			alt="文章缩略图"
			class="thumbnail"
			v-if="articleDetail"
		/>
		<div class="content" v-html="parsedContent" v-if="articleDetail"></div>
	</div>
</template>

<style scoped>
.article-detail-container {
	min-height: 60vh;
	/* overflow-x: auto; */
	position: relative;
	margin-right: 1.5vw;
	max-width: 85vw;
	background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
	color: #ffffff;
	padding: 2vw;
	border-radius: 15px;
	box-shadow: 0 4px 20px rgba(63, 72, 246, 0.5);
	/* font-family: 'Arial', sans-serif; */
	text-align: left;
	.title {
		text-align: center;
	}
	.head {
		display: flex;
		justify-content: space-around;
		margin-top: 1vh;
		padding-bottom: 2vh;
	}
}

h1 {
	font-size: 2.5em;
	margin-bottom: 10px;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.thumbnail {
	float: right;
	width: 30%;
	height: auto;
	max-height: 50vh;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(42, 230, 248, 0.5);
}

.summary,
.category,
.tags,
.view-count {
	font-size: 1.2em;
	margin: 10px 0;
	text-align: center;
}

.content {
	margin: 20px 0;
	margin-top: 0;
	line-height: 1.6;
}

button.read-more {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.3s;
	display: block;
}

button.read-more:hover {
	background-color: #0056b3;
	transform: translateY(-2px);
}

.footer {
	display: flex;
	justify-content: space-around;
}
</style>
